<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.recharge') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('recharge-save')" @click="btnOk">保存</el-button>
        </template>
      </PageTitle>
      <el-row :span="24" style="margin-top: 20px;">
        <el-form ref="ruleForm" :model="list" label-width="180px" :rules="rules" style="max-height: 750px;overflow-y: auto;">
          <el-form-item label="赠送设置:">
            <div v-for="(item,index) in listApp" :key="index" class="item-box">
              <label style="margin: 0 10px;">充值满</label>
              <el-input v-model="item.money" style="width: 10%;" />
              <label style="margin: 0 10px;">元，赠送</label>
              <el-input v-model="item.give" style="width: 10%;" />
              <label style="margin: 0 10px;">元，赠送</label>
              <el-input v-model="item.give_score" style="width: 10%;" />
              <label style="margin: 0 10px;">积分</label>
              <el-button v-if="index===0" size="mini" type="primary" @click="addggname">新增</el-button>
              <el-button v-else size="mini" type="primary" @click="removeggname(index)">删除</el-button>
            </div>

          </el-form-item>
          <el-form-item label="用户输入金额:">
            <el-radio-group v-model.number="list.caninput">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('table.state')" prop="status">
            <el-select v-model.number="list.status" :placeholder="$t('table.selectThe')+' '+$t('table.state')">
              <el-option v-for="(item,index) in statusData" :key="index" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="充值说明">
            <RichText ref="child" :values="list.shuoming" style="width:50%" />
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import { RechargeList, RechargeAdd } from '@/api/user'
export default {
  data() {
    return {
      statusData: [{
        id: 1,
        value: this.$t('table.normal')
      },
      {
        id: 2,
        value: this.$t('table.deactivate')
      }],
      list: {},
      listApp: [],
      rules: {
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUserAdmin()
  },
  methods: {
    // 新增一条规格值
    addggname(e) {
      // 获取当前的规格值数量,定义一个对象
      const one = {
        money: undefined,
        give: undefined,
        give_score: undefined
      }
      // 将新的对象追加到当前的数组
      this.listApp.push(one)
    },
    // 移除当前的规格值
    removeggname(k) {
      this.listApp.splice(k, 1)
    },
    // 获取充值赠送
    async getUserAdmin() {
      const one = {
        id: 1
      }
      const { list } = await RechargeList(one)
      this.list = list
      this.listApp = JSON.parse(list.givedata)
      console.log(this.listApp)
      this.openDialog()
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 获取富文本编辑内容
        const oldProcedure = this.$refs.child.getVal()
        this.list.shuoming = oldProcedure
        // 格式充值数据
        this.list.givedata = JSON.stringify(this.listApp)
        // 调用新增接口
        await RechargeAdd(this.list)
        // 更新数据
        this.getUserAdmin()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 给图片赋值
    openDialog() {
      if (this.list.desc) {
        this.$refs.child.content = this.list.shuoming
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    margin-top:30px
  }
  .item-box{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
</style>
